<template>
  <div class="hello">
    <div class="half">50%宽度的</div>
    <div aspectratio w-188-246 class="color">
      <span>宽高比188-246</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  async mounted () {

  },
  methods: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.box input {
  touch-action: manipulation;
}
.color {
  width: 300px;  color: #42b983;  background: #ff0;
  span {
    position: absolute;top: 0;left: 0;
  }
}
.test-block {
  position: absolute;  width: 20px;  height: 10000px;  background: #000;
}
.half {
  width: 375px; color: #fff; background: #000;
}

</style>
